<template>
  <div>
    <t-card class="list-card-container" :bordered="false">
      <t-table :data="data" :columns="COLUMNS" :row-key="rowKey" vertical-align="top" :hover="true"
        :pagination="pagination" :selected-row-keys="selectedRowKeys" :loading="dataLoading">
        <template #op="slotProps">
          <t-space>
            <t-link theme="primary" @click="handleEdit(slotProps)">抄表</t-link>
            <t-link theme="success" @click="receipt(slotProps)">收据</t-link>
            <t-link theme="danger" @click="handleArrived(slotProps)">到账</t-link>
          </t-space>
        </template>
      </t-table>
    </t-card>

    <t-dialog v-model:visible="deleteVisible" :body="deleteBody" header="提示" :on-cancel="onCancel"
      @confirm="onConfirmDelete" />

    <dialog-form v-model:visible="formDialogVisible" :data="formData" @refreshData="fetchData()" />
    <receipt-form v-model:visible="receiptVisible" :data="receiptData" />
  </div>
</template>

<script lang="ts">
export default {
  name: 'HouseUncollected',
};
</script>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { getUncollected, account } from '@/api/house/uncollected';
import { MessagePlugin } from 'tdesign-vue-next';

import { COLUMNS } from './constants';
import type { FormData } from './components/MeterForm.vue';
import type { ReceiptData } from './components/Receipt.vue';
import DialogForm from './components/MeterForm.vue';
import ReceiptForm from './components/Receipt.vue';

// 必需。table唯一标识一行数据的字段名，
const rowKey = 'id';

// 新增功能
const INITIAL_DATA: FormData = {
  id: 0,
  property_name: '',
  name: '',
  electricity_meter_last_month: undefined,
  water_meter_last_month: undefined,
  meter_reading_time: '',
  electricity_meter_this_month: 0,
  water_meter_this_month: 0,
  rental: 0,
  deposit: 0,
  management: 0,
  other_charges: 0,
  note: '',
};
const formData = ref({ ...INITIAL_DATA });
const formDialogVisible = ref(false);
const INITIAL_R: ReceiptData = {
  id: 0,
  property_name: '',
  name: '',
  electricity_meter_last_month: undefined,
  water_meter_last_month: undefined,
  meter_reading_time: '',
  electricity_meter_this_month: 0,
  water_meter_this_month: 0,
  rental: 0,
  deposit: 0,
  management: 0,
  other_charges: 0,
  note: '',
  start_time: '',
  end_time: '',
  electricity_consumption: 0,
  electricity: 0,
  water_consumption: 0,
  water: 0,
  electricity_price: 0,
  water_price: 0,
  total_money: 0
};
const receiptVisible = ref(false);
const receiptData = ref({ ...INITIAL_R });

// 列表查询功能，data为列表数据
const data = ref([]);
const pagination = ref({
  defaultPageSize: 20,
  total: 100,
  defaultCurrent: 1,
});
const dataLoading = ref(false);
const fetchData = async () => {
  dataLoading.value = true;
  try {
    const { list } = await getUncollected();
    data.value = list;
    pagination.value = {
      ...pagination.value,
      total: list.length,
    };
  } catch (e) {
    if (e.response && e.response.data.code === 995) {
      MessagePlugin.error(e.response.data.message);
    } else {
      MessagePlugin.error('系统错误');
    }
  } finally {
    dataLoading.value = false;
  }
};
// 用于在组件挂载到 DOM 上之后执行一些操作
onMounted(() => {
  fetchData();
});

// 修改功能
const handleEdit = (row: { row: any }) => {
  formDialogVisible.value = true;
  formData.value = { ...row.row };
};

const receipt = (row: { row: any }) => {
  receiptVisible.value = true;
  receiptData.value = { ...row.row };
};

// 删除功能
const deleteIdx = ref(-1);
const deleteBody = ref('');
const deleteVisible = ref(false);
const selectedRowKeys = ref([1, 2]);
const resetIdx = () => {
  deleteIdx.value = -1;
};
const handleArrived = (row: { row: any }) => {
  deleteVisible.value = true;
  deleteIdx.value = row.row.id;
  deleteBody.value = row.row.name + '的 ' + row.row.total_money + '元 是否到账?';
};
const onConfirmDelete = async () => {
  // 真实业务请发起请求
  try {
    await account({ id: deleteIdx.value });
    fetchData();
    resetIdx();
  } catch (e) {
    if (e.response && e.response.data.code === 995) {
      MessagePlugin.error(e.response.data.message);
    } else {
      MessagePlugin.error('系统错误');
    }
  } finally {
    deleteVisible.value = false;
  }
};
const onCancel = () => {
  resetIdx();
};
</script>

<style lang="less" scoped>
.list-card-container {
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);

  :deep(.t-card__body) {
    padding: 0;
  }
}

.left-operation-container {
  display: flex;
  align-items: center;
  margin-bottom: var(--td-comp-margin-xxl);
}
</style>
